<script setup lang="ts">
import { getAuthorsList } from '@/service/JuejinSkeletonAuthorsService'
import { getAssetsFile } from '@/utils/getAssetsFile'
import { onMounted, ref } from 'vue'

export interface IauthorsList {
  title: string
  imgName: string
  description: string
}

const authorsList = ref<IauthorsList[]>([])
onMounted(async () => {
  // dataActList.value = []
  authorsList.value = await getAuthorsList()
})
</script>
<template>
  <div class="skeleton">
    <li
      class="hot-item hot-item-authors"
      v-for="item in authorsList"
      :key="item.title"
    >
      <!---->
      <div class="hot-item-text hot-item-text-authors">
        <!---->
        <a
          href="/user/1665088861772688"
          class="info"
          target="_blank"
          :title="item.title"
        >
          <img
            :src="getAssetsFile(item.imgName)"
            alt="avatar"
            type="avatar"
            class="hot-item-img"
          />
        </a>
        <span class="title-authors">
          <a
            href="/user/1665088861772688"
            class="info"
            target="_blank"
            :title="item.title"
          >
            <span class="title">{{ item.title }}</span>
            <span class="description"> {{ item.description }}</span>
          </a>
          <div class="action">
            <div class="follow-wrap">
              <button
                type="button"
                class="follow byte-btn byte-btn--text byte-btn--normal"
              >
                <!----><!---->
                <span> + 关注 </span>
              </button>
            </div>
          </div>
        </span>
      </div>
    </li>
  </div>
</template>
<style lang="scss" scoped>
.hot-item-authors {
  height: 42px;
}

.hot-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 8px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 22px;
  &:hover {
    background-color: #f7f8fa;
  }
}
.hot-item-text-authors {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  align-items: center;
}
.hot-item-text {
  color: #252933;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  flex: 1;
}
.hot-item-img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 8px;
  line-height: 0;
}
.title-authors {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}
.info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: 140px;
}
.title {
  font-size: 14px;
  color: #252933;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
}
.description {
  font-size: 12px;
  color: #515767 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
}
.action {
  display: flex;
  cursor: pointer;
  align-items: center;
}
.follow-wrap {
}
.follow {
  color: #1e80ff;
}
.byte-btn--text {
  color: #3370ff;
  border: 0;
  padding: 0;
  background-color: transparent;
}
.byte-btn {
  text-transform: none;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  cursor: pointer;
  border: 1px solid #e6e8eb;
  border-style: none;
  white-space: nowrap;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  line-height: 1.5;
  height: 32px;
  // padding: 0 14px;
  // color: #282f38;
  font-size: 14px;
  border-radius: 2px;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
  &:active,
  &:focus,
  &:hover {
    outline: 0;
  }
}
</style>
